/**
 * Created by user on 2018/3/20.
 */
import React, { Component } from 'react'
import { connect } from 'react-redux'
import GlobalTitle from '../globalTitle'
import { EndAction } from '@act'
import { API } from '@utils/config'
import SocketManager from '@utils/SocketManager'
import { originData, setData, Request, EventCenter } from '@utils/Global'
const { toggleLoading } = EndAction

class EndScreen extends Component {
  replayPromise(data) {
    const { info, token } = data
    const { id } = info
    return new Promise((resolve, reject) => {
      Request.SendRequest(API.REPLAY_DATA(id, token), 'GET', null, (res) => {
        if (res.status) {
          resolve({
            status: 1,
            data: res.data,
            msg: ''
          })
        } else {
          resolve({
            status: 0,
            data: null,
            msg: res.message || '获取,请重试'
          })
        }
      }, (err) => {
        resolve({
          status: 0,
          data: null,
          msg: '提交失败,请重试'
        })
      })
    })
  }
  async clickReplayBtn() {
    const { dispatch } = this.props
    dispatch(toggleLoading(true))
    var rd = await this.replayPromise(originData['live'])
    dispatch(toggleLoading(false))
    if (rd.status) {
      setData('replay', rd.data)
      EventCenter.emit('get_replay_data_success')
    }
  }
  renderLoading() {
    const { loading } = this.props
    return loading ? (
      <div className="loading">
        <img className="loading_gif" src={require('@images/default_loading.gif')} alt=""/>
      </div>
    ) : null
  }
  render() {
    const { cover, color_theme } = this.props
    return(
      <div>
        <GlobalTitle/>
        <div className="end_screen">
          { this.renderLoading() }
          <div className="qa_top_bg" style={{ backgroundImage: 'url(' + cover + ')' }}>
            <div onClick={this.clickReplayBtn.bind(this)} className={`to_replay_btn ${color_theme === 'red' ? 'red' : ''}`}>观看回放</div>
          </div>
          <div className="advance_con">
            <div className="advance_title">
              <img className="advance_title_icon" src={require('@images/advance_icon.png')} alt=""/>
              直播预告
            </div>
            <div className="advance_list">
              <div className="advance_item">
                近期暂无直播
              </div>
            </div>
          </div>
          <div className="end_btn">直播已结束</div>
        </div>

      </div>

      )
  }
}
const mapStateToProps = (state) => {
  return {
    cover: state.MainScreenState.info.cover,
    loading: state.EndState.loading,
    color_theme: state.MainScreenState.info.color_theme
  }
}
export default connect(mapStateToProps)(EndScreen)
